<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>更换手机号</title>
    <link rel="stylesheet" href="../../font/iconfont.css">
    <link rel="stylesheet" href="../../lib/bootstrap-3.4.1-dist/css/bootstrap.min.css">
    <script src="../../lib/jquery/jquery-3.6.0.min.js"></script>
    <script src="../../lib/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../../css/gerenxinxi/genghuan.css">
</head>

<body>

    <div class="container huan1">
        <div class="row">
            <h3>更换手机号</h3>
        </div>
        <div class="row">
            <div><img src="../../lib/img/gerenxinxi/1.png" alt=""></div>
        </div>
        <div class="row">
            <div class="col-md-offset-4">
                <p>已绑定的号码<span>189****3256</span></p>
                <div class="duanxin"> <input class="shuru" type="text" placeholder="请输入短信验证码"><button class="btn_duanxin" onclick="tip()">获取验证码</button> <span class="tips1"><img
                            src="../../lib/img/gerenxinxi/u22457.png" alt=""> 短信验证码已发送至189****3256</span></div>
                <div class="tips">请输入正确的短信验证码</div>
                <button class="btn" onclick="btn()">下一步</button>
            </div>
        </div>
    </div>

    <div class="container huan2">
        <div class="row">
            <h3>更换手机号</h3>
        </div>
        <div class="row">
            <div><img src="../../lib/img/gerenxinxi/2.png" alt=""></div>
        </div>
        <div class="row">
            <div class="col-md-offset-4">
                <div class="shuru"><input type="text" placeholder="请输入新手机号"></div>
                <div class="duanxin"><input type="text" placeholder="请输入短信验证码"><button class="btn_duanxin" onclick="tip()">获取验证码</button> <span><img
                            src="../../lib/img/gerenxinxi/u22457.png" alt="">短信验证码已发送至189****3256</span></div>
                <div class="tips">请输入正确的短信验证码</div>
                <button class="btn" onclick="btn1()">确定</button>
            </div>
        </div>
    </div>

    <div class="container huan3">
        <div class="row">
            <h3>更换手机号</h3>
        </div>
        <div class="row">
            <div><img src="../../lib/img/gerenxinxi/3.png" alt=""></div>
        </div>
        <div class="row">
            <div class="col-md-offset-4">
                <h3>恭喜你，更换手机号成功</h3>
                <p>点击下方按钮，或60秒后自动返回</p>
                <button class="btn" onclick="btn2()">返回</button>
            </div>
        </div>
    </div>

    <script>
        function tip(){
            $('.duanxin>span').css("display", "inline-block")
          
             $('.btn').css({
                "background-color":"#0099FF",
                "color":"#FFFFFF"
             })
        }
      
        function btn() {
            $('.huan1').css("display", "none")
            $('.huan2').css("display", "block")
        }
        function btn1() {
            $('.huan1').css("display", "none")
            $('.huan2').css("display", "none")
            $('.huan3').css("display", "block")
        }
        function btn2() {
            $('.huan1').css("display", "block")
            $('.huan2').css("display", "none")
            $('.huan3').css("display", "none")
        }

    </script>
</body>

</html>